<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/*选择器的权重（优先级）：
1.内联样式：1000
2.id选择器（id名只能有一个，相当于一个人的身份证号）：100
3.class和伪类选择器（可以有多个元素应用，它相当于一个的班级）：10
4.元素选择器：1
5.通配选择器（*）：0
当使用复合选择器时，其权重可以累加，但无论怎样累加，不会逾越其等级

*/
        *{
            background-color: skyblue;
        }   

        span{
            background-color: yellow;
        }

        .class01{
            background-color: chocolate;
        }
        #id01{
            background-color: red;
        }

/* 当优先级相同时，会采用最后面的样式 */
        span#id01{
            background-color: aqua;
        }
        span#id01{
            background-color: aliceblue;
        }

/* ！important可以使该选择器的优先级最高 */
        span#id01{
            background-color: aliceblue!important;
        }

    </style>
</head>
<body>
    <p>
        <span class="class01" id="id01" style="background-color: orange;">
            我是好人
        </span>
    </p>
</body>
</html>